<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单录入</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
        .el-collapse-item__content {
            padding-bottom: 2px;
        }
    </style>

    <style type="text/css">
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 3px;
        }
        .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
            padding-right: 0px;
        }
        .el-tooltip__popper{ max-width:20%; }
        .el-tooltip__popper{
            display: none;
        }

        .el-table{
            /*font-weight: bold;*/
            overflow: visible !important;
        }

        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/


        /* 列表样式修改*/
        /* 去掉最下面的那一条线 */
        .el-table::before {
            height: 0px;
        }

        /* 表格斑马自定义颜色 */
        .el-table__row.warning-row {
            background: #F1F1F1;
        }

        /* 合计颜色重置 */
        .el-table__footer-wrapper tbody td.el-table__cell {
            background: #fff;
        }

        table {
            border-color: black !important;
        }

        /** 改变边框颜色 */
        /* .el-table--border,
        .el-table--group {
            border: 1px solid #CCCCCC !important;
        } */

        /** 改变表格内竖线颜色 */
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #CCCCCC !important;
        }

        /** 改变表格内行线颜色 */
        .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #CCCCCC !important;
        }

        .el-table thead tr th {
            border-color: #8c939d;

        }
        .el-table th.el-table__cell{
            background: #f5f7fa;
        }
        .el-table thead {
            color: #606266;
        }
        .el-table td{
            font-size: 14px;
            background: #dfefff6b;
        }

        .el-divider--horizontal {
            margin: 12px 0px;
        }
    </style>

</head>
<body>

<div id="app">
    <el-collapse v-model="activeNames" >
        <el-form :inline="true" :model="formData" :show-message="false" size="small" label-width="115px"  ref="formData" :rules="rules" class="demo-form-inline">
            <el-collapse-item title="单据信息" name="1">
                <div>
                    <el-form-item label="销售类型："  class="" prop="xslx" >
                        <el-select style="width:200px"
                                   v-model="formData.xslx"  >
                            <el-option  value="0" label="零售" ></el-option>
                            <el-option  value="1" label="批发" ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="客户："  class="" prop="khid" >
                        <el-select style="width:200px"
                                   v-model="formData.khid"  >
                            <el-option v-for="(item,index) in formData.listkh" :value="item.id" :label="item.khmc" ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="仓库："  class="" prop="ckid" >
                        <el-select style="width:200px"
                                   v-model="formData.ckid"  >
                            <el-option v-for="(item,index) in formData.listck" :value="item.id" :label="item.name" ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="单据编号："  class="" prop="ddbh" >
                        <el-input v-model="formData.ddbh" style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="经手人："  class="" prop="jsr" >
                        <el-select style="width:200px"
                                   v-model="formData.jsr"  >
                            <el-option v-for="(item,index) in formData.jsrList" :value="item.login_name" :label="item.user_name" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务日期："  class="" prop="ywrq" >
                        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="formData.ywrq" style="width:200px" ></el-date-picker>
                    </el-form-item>
                </div>
            </el-collapse-item>
            <el-collapse-item title="商品明细" name="2">
                <div>
                    <el-button  style="margin:3px 0px;" icon="el-icon-plus" type="primary" size="small" @click="addShangpin" >添加商品</el-button>
                    <input placeholder="请扫码商品编号/条形码"  class="el-input__inner el-input--small el-input__inner" size="small" v-model="formData.txm" @keyup.enter="addshangpinfortxm" style="width:200px;height: 32px;" ></input>

                    <el-table
                            :data="tableData"
                            size="mini"
                            border
                            style="width: 100%">

                        <el-table-column
                                label="操作"
                                width="50">
                            <template slot-scope="scope">
                                <el-button @click="deleteshangpin(scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>

                        <el-table-column v-for="(item,index) in listColumn"
                                         :prop="item.field"
                                         :label="item.title"
                                         sortable="custom"
                                         :show-overflow-tooltip="true"
                                         :width="item.minWidth" >
                            <template  slot-scope="scope">
                                <template  v-if="item.col_style!=undefined && item.col_style == '4'" >
                                    <span @click="openImageurl(scope.row[item.field])" style='margin: 0 5px;' v-for="(src,index1) in scope.row[item.field].split(',')" ><img :src="src"   width="30px" height="30px" /></span>
                                </template>

                                <!--列表输入框进行编辑-->
                                <template v-if="item.is_list_edit == '0'" >
                                    <el-input  size="mini" v-model="scope.row[item.field]" @input="setfee(scope.row,item.field)"  ></el-input>
                                </template>

                                <template v-else >
                                    <el-popover
                                            placement="top-start"
                                            width="300"
                                            trigger="click" >
                                        <div style="color:#800000">{{scope.row[item.field]}}</div>
                                        <span slot="reference">{{scope.row[item.field]}}</span>
                                    </el-popover>
                                </template>
                            </template>

                        </el-table-column>

                    </el-table>

                    <el-row style="float: right;">
                        <span style="display: inline-block;width: 200px;">商品总数量：{{formData.zsl}}</span> <span>总金额：{{formData.zje}}元</span>
                    </el-row>
                </div>
            </el-collapse-item>
            <el-collapse-item title="帐单信息" name="3">
                <div>
                    <el-form-item label="整单折扣："  class="" prop="zdzk" >
                        <el-input v-model="formData.zdzk" @input="comfee" style="width:200px" ><template slot="append">%</template></el-input>
                    </el-form-item>

                    <el-form-item label="其他费用："  class="" prop="qtfy" >
                        <el-input v-model="formData.qtfy"  @input="comfee" style="width:200px"><template slot="append">元</template></el-input>
                    </el-form-item>
                    <el-form-item label="总计金额："  class="" prop="zje"  >
                        <el-input v-model="formData.zje" disabled="true"  style="width:200px" ><template slot="append">元</template></el-input>
                    </el-form-item>

                    <el-form-item label="本单欠款："  class="" prop="qk_fee"  >
                        <el-input v-model="formData.qk_fee" disabled="true"  style="width:200px" ><template slot="append">元</template></el-input>
                    </el-form-item>

                    <el-form-item label="是否需要发票："  class="" prop="is_fp"  >
                        <el-select style="width:200px" v-model="formData.is_fp" >
                            <el-option  value="0" label="否" ></el-option>
                            <el-option  value="1" label="是" ></el-option>
                        </el-select>
                    </el-form-item>

                </div>
                <div>
                    <el-row v-for="(item,index) in jszh">
                        <el-form-item label="结算帐户："  class=""   >
                            <el-select style="width:200px" v-model="jszh[index].jszhid" >
                                <el-option v-for="(item,index) in formData.listzh" :value="item.id" :label="item.zhmc" ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="实收金额："  class=""   >
                            <el-input  style="width:200px" v-model="jszh[index].dj" @input="comfee" ><template slot="append">元</template></el-input>
                        </el-form-item>
                        <el-button type="text" @click="addjszh">添加</el-button>
                        <el-button v-if="index > 0" type="text" @click="removejszh(index)">移除</el-button>

                    </el-row>

                </div>
            </el-collapse-item>
            <el-collapse-item title="其它信息" name="4">
                <div>
                    <el-form-item label="送货日期："  class=""  >
                        <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="formData.shrq" style="width:500px" ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="客户联系人："  class=""  >
                        <el-input v-model="formData.khlxr" style="width:500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话："  class=""  >
                        <el-input v-model="formData.dh" style="width:500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="地址："  class=""  >
                        <el-input v-model="formData.dz" style="width:500px;"></el-input>
                    </el-form-item>

                    <el-form-item label="备注："  class=""  >
                        <el-input v-model="formData.bz" style="width:500px;"></el-input>
                    </el-form-item>
                </div>

                <div>
                    <el-form-item label="上传附件："  class=""  >
                        <el-upload
                                :on-success="uploadSuccess"
                                :on-remove="(file, fileList) => {uploadSuccess(null,file, fileList)}"
                                :headers="headers"
                                :action="wwwurl+'/admin/api/UploadController/elementUiUploadDopostFileUpload'"
                                list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-collapse-item>
        </el-form>
    </el-collapse>

</div>

<script>



var vm = new Vue({
    el: '#app',
    data: {
        headers:{token:localStorage.getItem("token")},
        activeNames:["1","2","3","4"],
        formData:{},
        listColumn:[],//商品明细表头
        tableData: [],
        tableId:getTableId("1014"),
        tableIdmx:getTableId("1015"),
        tableJszh:getTableId("1016"),
        rules:{},
        jszh:[{jszhid:"",dj:"0.00"}],//结算帐户列表
        parmsData:{},
        is_yz:"0",
    },
    created(){
        this.parmsData = getParams();
        this.getHead();
        //如果Id不为空，则是修改表单
        if(this.parmsData.id != undefined){
            this.getFormdata();
        }else {
            this.getDDinfo();
        }

        this.formYanzheng();
    },
    methods:{
        //扫码添加商品
        async addshangpinfortxm(){
            let res1 = await page(getTableId("952"),"id","1","1",{txm:this.formData.txm,type:"8"});
            let res = {data:res1.data.rows};
            await vm.searchshangpinadd(res);
        },
        //获取表单修改数据
        async getFormdata(){
            const res = await postWebCustom(getTableId("1019"),{id:this.parmsData.id});
            this.formData = res.data;
            this.tableData = res.data.listspmx;
            this.jszh = res.data.listdjmx;
            if(this.parmsData.new_ddbh == "true"){
                for(let a=0;a<this.tableData.length;a++){
                    this.tableData[a].uuid = guid();
                }
                if(res.data.listdjmx.length>0){
                    this.jszh = res.data.listdjmx;
                    for(let a=0;a<this.jszh.length;a++){
                        this.jszh[a].uuid = guid();
                    }
                }
            }


            //重新获取订单编号
            if(this.parmsData.new_ddbh == "true"){
                const res = await postWebCustom(getTableId("1026"),{type:"7"});
                this.formData.ddbh = res.data.ddbh;
            }
        },
        //获取商品明细表头
        async getHead(){
            const res = await postBody("/admin/api/DataManagementController/getCustomFields", {tableId: this.tableIdmx,mapdata:{},other: {}});
            this.listColumn = res.data.listColumn;
        },
        //获取开单数据
        async getDDinfo(){
            const res = await postWebCustom(getTableId("1026"),{type:"7"});
            this.formData = res.data;
            this.formData.zdzk="100";
        },
        //查询表单必输项验证
        async formYanzheng(){
          const res = await postBody("/admin/api/DataManagementController/enterCustomFieldQuery",{tableId:this.tableId});
          this.rules = res.data.roles;
        },
        //添加结算帐户
        addjszh(){
            let uuid = guid();
            this.jszh.push({dj:"0.00",jszhid:"",uuid:uuid});
        },
        async removejszh(index){
            let map = this.jszh[index];
            if(map.uuid == undefined){
                const res = await postWebCustom(getTableId("1043"),{id:map.id,m:this.tableId,mx:this.tableJszh,is_yz:this.is_yz});
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
            }
            this.jszh.splice(index,1);
            this.comfee();
        },
        //计算金额
        setfee(row,field){
            if(field == "fee"){
                row.zhdj = Number(row.fee)*Number(row.zkl)/100;
                row.zje = Number(row.zhdj)*Number(row.sl);
            }
            if(field == "sl"){
                row["zje"] = Number(row.zhdj)*Number(row.sl);
            }
            if(field == "zkl"){
                row.zhdj = Number(row.fee)*Number(row.zkl)/100;
                row.zje = Number(row.zhdj)*Number(row.sl);
            }
            if(field == "zje"){
                row.zkl = Number(row.zje)/Number(row.sl)/Number(row.fee)*100;
                row.zhdj = Number(row.fee)*Number(row.zkl)/100;
            }
            vm.comfee();
        },
        //文件上传成功后
        uploadSuccess(response, file, fileList){
            let srcs = [];
            for(let a=0;a<fileList.length;a++){
                let res = fileList[a].response;
                let src = res.data.src;
                srcs[a] = src;
            }
            this.formData["fj"] = ""+srcs;
        },
        //计算金额
        comfee(){
            let zje = 0.00;
            let zsl = 0;
            if(this.formData.zdzk == undefined){
                Vue.set(vm.formData,"zdzk","100");
            }
            if(this.formData.qtfy == undefined){
                Vue.set(vm.formData,"qtfy","0.00");
            }
            for(let a=0;a<vm.tableData.length;a++){
                zje = zje+Number(vm.tableData[a].zje);
                zsl = zsl+Number(vm.tableData[a].sl);
            }

            this.formData.zsl = zsl;
            zje = zje*Number(vm.formData.zdzk)/100+Number(this.formData.qtfy);
            Vue.set(vm.formData,"zje",zje);//计算总金额

            //计算欠款金额
            let sf_fee = 0;
            for(let a=0;a<this.jszh.length;a++){
                sf_fee = sf_fee+Number(this.jszh[a].dj);
            }
            this.formData.qk_fee = zje-sf_fee;
        },
        //添加商品明细
        addShangpin(){
            if(this.formData.xslx == "" || this.formData.xslx == undefined){
                top.alert("请选择销售类型！");
                return ;
            }
            let btn = {btn: ['确定', '取消']
                ,yes: async function(index, layero){
                    console.log(layero);
                    //按钮【按钮一】的回调
                    let win = getTopIframe(layero);
                    let data = win.vm.multipleSelection;
                    let res1 = await page(getTableId("952"),"id","1","1000",{id:data,type:"8"});
                    let res = {data:res1.data.rows};
                    await vm.searchshangpinadd(res);
                    top.layer.close(index);
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                }};
            top.f_layer_open_get("/admin/html/module/jinxiaocun/common_shangpin_list.html?tableId="+getTableId("1036")+"&ckid="+this.formData.ckid,"95%","80%",function () {

            },btn,"添加商品",{})
        },
        async searchshangpinadd(res){
            for(let a=0;a<res.data.length;a++){
                res.data[a]["uuid"] = guid();
                if(this.formData.xslx == "1"){
                    res.data[a]["fee"] = res.data[a]["pfj"];
                }else {
                    res.data[a]["fee"] = res.data[a]["lsj"];
                }

                res.data[a]["sl"] = "1";
                res.data[a]["zkl"] = "100";
                res.data[a]["zhdj"] = res.data[a]["fee"];
                res.data[a]["zje"] = res.data[a]["fee"];
                res.data[a]["spmxid"] = res.data[a]["id"];
                res.data[a]["sxname"] = res.data[a]["sx1"]+","+res.data[a]["sx2"];
            }
            vm.tableData = [...vm.tableData,...res.data];
            vm.comfee();
        },
        //删除商品明细
        async deleteshangpin(row){
            for(let a=0;a<this.tableData.length;a++){
                //修改表单删除商品
                if(this.tableData[a]["uuid"] == undefined && row.id == this.tableData[a].id){
                    const res = await postWebCustom(getTableId("1043"),{id:row.id,m:this.tableId,mx:this.tableIdmx,is_yz:this.is_yz});
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                    this.tableData.splice(a,1);
                }else if(this.tableData[a]["uuid"] != undefined){
                    //新添加的商品删除
                    if(this.tableData[a]["uuid"] == row.uuid ){
                        this.tableData.splice(a,1);
                    }
                }

            }
        }

    },
    computed: {
    },
    watch:{
    }
})


function verificationPrem(){
    return new Promise((resolve,reject)=>{
        vm.$refs["formData"].validate((valid) => {
            if (valid) {
                resolve(true);
            } else {
                resolve(false);
            }
        });
    })
}


//验证必填项
async function verification() {
   const v = await verificationPrem();
   if(!v){
       top.alert("红*号为必须输入项！");
   }
    return v;
}

function getData() {
    let mapdata = vm.formData;
    mapdata["jszh"] = JSON.stringify(vm.jszh);
    mapdata["spmx"] = JSON.stringify(vm.tableData);
    return mapdata;
}


function setData(data) {
    if(Object.keys(data).length > 0){
        vm.setFormData = data;
    }

}
</script>


</body>
</html>
